<template>
  <div class="profile-section">
    <div class="container">
      <div class="contact-mail">
        <div class="title">Mail Us</div>
        <div class="subtitle">Mail your details</div>
        <a-form
          :noStyle="true"
          class="contact-form"
          ref="formRef"
          :model="formData"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="HELLO MY NAME IS"
                name="name"
                :rules="formRules.name"
              >
                <a-input
                  v-model:value="formData.name"
                  placeholder="YOUR NAME*"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="I AM FROM"
                name="from"
                :rules="formRules.from"
              >
                <a-input
                  v-model:value="formData.from"
                  placeholder="Your Place*"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="YOU CAN REACH ME ON MY PHONE AT"
                name="phone"
                :rules="formRules.phone"
              >
                <a-input
                  v-model:value="formData.phone"
                  placeholder="Your Phone*"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="MY EMAIL IS"
                name="email"
                :rules="formRules.email"
              >
                <a-input
                  v-model:value="formData.email"
                  placeholder="Your Email*"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="MY SUBJECT IS"
                name="subject"
                :rules="formRules.subject"
              >
                <a-input
                  v-model:value="formData.subject"
                  placeholder="Your Subject*"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="MY MESSAGE IS"
                name="message"
                :rules="formRules.message"
              >
                <a-textarea
                  v-model:value="formData.message"
                  placeholder="Enter your message*"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24" class="text-center">
              <button type="button" @click.prevent="submitContact">
                Submit now
              </button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="contact">
        <div class="wrapper">
          <div class="row">
            <div
              class="col-md-4 contact-follow d-flex align-items-center flex-column"
            >
              <div class="">
                <img
                  :src="require('@/assets/image/welons-logo-1.png')"
                  class=""
                  alt="..."
                />
              </div>
              <div class="mt-auto">
                <h3 class="">Follow Us</h3>
                <ul class="follow-list">
                  <template v-for="(item, index) in followList" :key="index">
                    <li :style="{ backgroundColor: item.color }">
                      <a :href="item.url">
                        <i :class="item.icon"></i>
                      </a>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
            <div class="col-md-8 contact-address">
              <div class="row">
                <div class="col-md-7" v-if="contactData1">
                  <h3>Our Address</h3>
                  <p>
                    <template
                      v-for="(item, index) in contactData1.addressList"
                      :key="index"
                    >
                      <span>{{ item.fullContactAddress }}</span>
                      <br />
                    </template>
                  </p>

                  <h3>Tel</h3>
                  <p>
                    <template
                      v-for="(item, index) in contactData1.telList"
                      :key="index"
                    >
                      <span>{{ item.tel }}</span>
                      <br />
                    </template>
                  </p>
                  <h3>Email</h3>
                  <p>
                    <template
                      v-for="(item, index) in contactData1.emailList"
                      :key="index"
                    >
                      <span>{{ item.email }}</span>
                      <br />
                    </template>
                  </p>
                </div>
                <div class="col-md-5 d-flex align-items-center">
                  <button class="" @click="openCC">Start your projects</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addContact } from "@/api/index";

import BaseInfo from "@/datas/BaseInfo.json";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  ref,
  computed,
} from "vue";

import { Modal, message } from "ant-design-vue";

export default {
  name: "ContactUs",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      //
      formData: {
        name: "",
        from: "",
        phone: "",
        email: "",
        subject: "",
        message: "",
      },
      formRules: {
        name: [{ required: true, message: "Please input your name!" }],
        from: [{ required: true, message: "Please input your address!" }],
        phone: [{ required: true, message: "Please input your tel!" }],
        email: [
          { required: true, message: "Please input your email!" },
          { type: "email" },
        ],
        subject: [{ required: true, message: "Please input your subject!" }],
        message: [{ required: false, message: "Please input your message!" }],
      },
      //
      followList: BaseInfo.followList,
      //
      contactData: BaseInfo.footerData.contactData,
      contactData1: computed(() => {
        return proxy.$store.getters.footerData.contactData;
      }),
      //
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    //
    const formRef = ref();
    const methods = {
      async submitContact(value) {
        try {
          const values = await formRef.value.validateFields();
          var params = {
            "your-name": values.name,
            "your-email": values.email,
            "your-subject": values.subject,
            "your-message": values.message,
            "your-tel": values.phone,
            "your-address": values.from,
            "maths-quiz": 2,
            "_wpcf7_quiz_answer_maths-quiz": "e668be1227a4366d001d866d464d5f59",
          };
          console.log("Success:", params);
          Modal.confirm({
            title: "Confirm",
            // okText: "确认",
            // cancelText: "取消",
            onOk() {
              addContact(params)
                .then((res) => {
                  if (res.message.includes("谢谢")) {
                    message.success("Success");
                    formRef.value.resetFields();
                  } else {
                    message.error("Fail");
                  }
                })
                .catch(() => {
                  message.error("Exception");
                });
            },
            onCancel() {},
          });
        } catch (errorInfo) {
          console.log("Failed:", errorInfo);
        }
      },
      openCC() {
        window.ssq.push("chatOpen");
      },
    };
    //
    return {
      ...refData,
      ...methods,
      formRef,
    };
  },
};
</script>
<style lang="scss" scoped>
.profile-section {
  padding: 100px 0;

  ::v-deep .ant-form-item {
    padding: 0 15px;

    label {
      color: #464d50;
      text-transform: uppercase;
    }

    input {
      color: #464d50;
    }

    input,
    textarea {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      font-size: 1rem;
      outline: 0 !important;
      font-weight: 400;
    }

    label {
      font-size: 1rem;
      font-weight: 700;
      line-height: 52px;
    }
  }
}

.contact-mail {
  margin-bottom: 100px;

  .title {
    font-size: 40px;
    color: #464d50;
    line-height: 1.2;
    letter-spacing: -2px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
  }

  .subtitle {
    font-size: 18px;
    color: #848d91;
    line-height: 1;
    font-weight: 500;
    font-family: Muli, sans-serif;
  }

  .contact-form {
    margin: 40px -15px 0;
  }

  button {
    margin-top: 45px;
    padding: 20px 50px;
    border-radius: 30px;
  }
}

.contact {
  margin-top: 100px;
  background: #f6b237;
  color: #fff;
  padding: 10px;

  h3 {
    font-size: 2rem;
    line-height: 1;
    color: #fff;
  }

  .wrapper {
    border: 1px solid #ffffff;
  }

  .contact-follow {
    padding: 75px;
  }

  .contact-address {
    padding: 60px;
    border-left: 1px solid #ffffff;

    p {
      margin-bottom: 0;
      font-size: 1.5rem;
      font-weight: 200;
      line-height: 1.5rem;
    }

    p span {
      font-size: 1.25rem;
      line-height: 2rem;
    }

    p span strong {
      font-weight: 500;
    }

    button {
      border: 2px solid #fff;
      background: 0 0;
      padding: 20px 35px;
      font-weight: 600;
      border-radius: 30px;
      line-height: 1;
      -webkit-box-shadow: none;
      -moz-webkit-box-shadow: none;
      box-shadow: none;
    }
  }

  .contact-follow ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    li a {
      display: block;
    }

    li {
      float: left;
      font-size: 1rem;
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      color: #fff;
      // border-radius: 100%;
      // margin-top: 35px;
      margin-right: 15px;
      // border: #fff 1px solid;
      border-radius: 100%;
    }
  }
}
</style>
